import React, { Component } from 'react';
import { Layout } from 'antd';
import { observer, inject } from 'mobx-react';
import SiderBar from './components/SiderBar';
import Routers from '@/router';
import Header from './components/Header';
import Footer from './components/Footer';
import { withRouter } from 'react-router-dom';
import Breadcrumb from './components/Breadcrumb';
import styles from './index.scss';

@inject('AppStore')
@withRouter
@observer
class Home extends Component {
  constructor(props, context) {
    super(props, context);
    this.AppStore = this.props.AppStore;
    this.state = {};
  }

  componentDidMount() {
    this.AppStore.reqMenu();
  }

  componentWillUnmount() {}

  render() {
    const { menuList } = this.AppStore.toJS(this.AppStore);

    return (
      <div className={styles['home-container']}>
        <Layout style={{ minHeight: '100vh' }}>
          <SiderBar menuList={menuList} logoComp={<div className="logo" />} />
          <Layout className="layout">
            <Header />
            <Layout.Content style={{ margin: '0 16px' }}>
              <Breadcrumb menuList={menuList} />
              <div
                className="layout-background"
                style={{ padding: 24, minHeight: 360 }}
              >
                <Routers />
              </div>
            </Layout.Content>
            <Footer />
          </Layout>
        </Layout>
      </div>
    );
  }
}

export default Home;
